import React, { Component } from 'react'
import { connect } from 'react-redux'
import DmItem from './dmItem'

class DmList extends Component {
  renderContent() {
    const { list } = this.props
    var items = []
    list.map((item, index) => {
      items.push(
        <DmItem item={item} key={index} index={index} />
      )
    })
    return items
  }
  scrollToBottom() {
    const clientHeight = this.dmListDiv.clientHeight; //可视区域高度
    const scrollTop = this.dmListDiv.scrollTop;  //滚动条滚动高度
    const scrollHeight = this.dmListDiv.scrollHeight; //滚动内容高度
    this.dmListDiv.scrollTop = scrollHeight - clientHeight
  }
  componentDidMount() {
    this.scrollToBottom()
  }
  componentDidUpdate() {
    this.scrollToBottom()
  }
  render() {
    return (
      <div className="dm_list_outer">
        <div className="dm_list" ref={r => this.dmListDiv = r}>
          {this.renderContent()}
        </div>
      </div>
    )
  }
}
const mapStateTopProps = (state) => {
  return state.DmState
}
export default connect(mapStateTopProps)(DmList)
